const notice = document.querySelector('.notice')
const line = document.querySelector('.line')
const missionTop = document.querySelector('.top .box .mission')
const buttonBannerFirst = document.querySelector('.buttonBannerFirst')
const buttonBannerSceond = document.querySelector('.buttonBannerSceond')
const newsStrs = document.querySelector('.totalBlock .newsStrs')
const mission = document.querySelector('.totalBlock .mission')
const circle = document.querySelector('.noticeCircle')
const textNull = document.querySelector('.textNull')
const lisStr = document.querySelector('.totalBlock .newsStrs ul')
const missionStr = document.querySelector('.totalBlock .mission ul')
const list = document.querySelectorAll('.totalBlock .newsStrs ul li')
const checkDetails = document.querySelectorAll('.totalBlock .mission .bottomMission .checkDetails')
const bottomBtnC = document.querySelector('.common_button .c')
const bottomBtnA = document.querySelector('.common_button .a')

let arr = [
  {text:'在营车辆年检通知，为保障车辆能够…',date: new Date(),isRead:false},
  {text:'在营车辆年检通知，为保障车辆能够…',date: new Date(),isRead:false},
  {text:'在营车辆年检通知，为保障车辆能够…',date: new Date(),isRead:false}
]

 arr = JSON.parse(localStorage.getItem('arr')) || arr

let arr2 = [
  { name: '运输车辆：京A 123456', route: '运输路线：北京—河南', date: new Date(), isRead: false },
  {name:'运输车辆：京A 123456',route:'运输路线：石家庄-呼...',date: new Date(),isRead:false},   
]
arr2 = JSON.parse(localStorage.getItem('arr2') )|| arr2
render()
renderSecond() 
// 顶部线条切换滑动
notice.addEventListener('touchstart', () => {
  if (arr.length === 0) {
    buttonBannerFirst.style.display = 'none'
    buttonBannerSceond.style.display = 'none'
    textNull.style.display = 'block'
    mission.style.display = 'none'
  } else {
      // console.log(123);
  newsStrs.style.display = 'block'
  mission.style.display = 'none'
  buttonBannerFirst.style.display = 'flex'
  buttonBannerSceond.style.display = 'none'
  // line.style.transform = "translateX(75./@rem)"
}
line.classList.remove('active')
})
missionTop.addEventListener('touchstart', () => {
  // console.log(123);
  newsStrs.style.display = 'none'
  mission.style.display = 'block'
  textNull.style.display = 'none'
  buttonBannerFirst.style.display = 'none'
  buttonBannerSceond.style.display = 'flex'
  // line.style.transform = "translateX(185./@rem)"
  line.classList.add('active')
})
// 第一个模块全部已读
buttonBannerFirst.addEventListener('touchstart', (e) => {
  if (e.target.tagName !== 'DIV') return
  const list = document.querySelectorAll('.totalBlock .newsStrs ul li')
  list.forEach(function (item, index) {
    arr[index].isRead = true
  })
  // console.log(lisStr);
  // const index = e.target.dataset.index
  // arr.splice(arr[index], arr.length)
  render()
  // buttonBanner.style.display = 'none'
  // mission.style.display = 'none'
  // textNull.style.display ='block'
})
//第二个模块全部已读
buttonBannerSceond.addEventListener('touchstart', (e) => {
  if (e.target.tagName !== 'DIV') return
  const missionList = document.querySelectorAll('.totalBlock .mission ul li')
  missionList.forEach(function (item, index) {
      // const missionCircle = document.querySelectorAll(`.totalBlock .mission ul li .mainTop .missionCircle`)
      // console.log(missionCircle[index]);
      // missionCircle[index].style.opacity = 0
     arr2[index].isRead = true
     renderSecond()
  })
})
//公告详情跳转
newsStrs.addEventListener('touchstart', e => {
  // console.log(e.target.tagName);
  if (e.target.tagName === 'P') {
    e.preventDefault()
    location.href='./checkDetails.html'
  }
})
//删除
newsStrs.addEventListener('touchstart', (e) => {
  if (e.target.tagName !== 'I') return
  const index = e.target.dataset.index
  arr.splice(index, 1)
  // render()
  if (arr.length === 0) {
    buttonBannerFirst.style.display = 'none'
    textNull.style.display = 'block'
    // localStorage.setItem('arr',JSON.stringify(arr))
  }
  render()
})
//任务详情跳转
missionStr.addEventListener('touchstart', (e) => {
  if (e.target.tagName === 'SPAN') {
    location.href = './任务-待提货-详情.html'
  }
})
//底部跳转
bottomBtnC.addEventListener('touchstart', () => {
  location.href = './我的主页.html'
})
bottomBtnA.addEventListener('touchstart', () => {
  location.href = './待提货列表.html'
})


// 第一个模块渲染
function render() {
  const liStr = document.querySelector('.totalBlock .newsStrs ul')
  let items = ''
  arr.forEach((item, index) => {
    // console.log(index);
    items += `<li data-index="${index}">`
    items += item.isRead?'':`<div  class="noticeCircle"></div>`
    items += `
    <p class="text">${item.text}</p>
    <div class="date" id= "notice">${item.date.toLocaleString()}</div>
    <a class="del" href="javascript:;" " onclick = 'del(${index})'>
      <i class=" iconfont icon-shanchutianchong"></i>
    </a>
    </li>  
    `
  })
  
  liStr.innerHTML = items
  localStorage.setItem('arr',JSON.stringify(arr))
  initSwiper()
  const list = document.querySelectorAll('.totalBlock .newsStrs ul li')
  // 消除红点
  list.forEach(function (item, index) {
   item.addEventListener('touchstart', function () { 
    //  arr = JSON.parse(localStorage.getItem('arr'))
     arr[index].isRead = true
    //  localStorage.setItem('isRead',JSON.stringify(arr))
     render()
    //  localStorage.setItem('arr', JSON.stringify(arr))
   })
  })
}
//手势引入
function initSwiper() {
  const list = document.querySelectorAll('.totalBlock .newsStrs ul li')
  list.forEach((item,index) => {
    new AlloyFinger(item, {
      swipe: function (evt) {
        console.log("swipe" + evt.direction)
        if (evt.direction === 'Left') {
          const active = document.querySelector('.newsStrs .active')
          active && active.classList.remove('active')
          item.classList.add('active')
          document.querySelectorAll('.del')[index].style.width = 50+'px'
        } else {
          item.classList.remove('active')
        }
      }
    })
  })
}
//第二个模块渲染
function renderSecond() {
  const misionStr = document.querySelector('.totalBlock .mission ul')
  let itemss =''
  arr2.forEach((item, index) => {
    console.log(index);
    itemss += `<li  data-index="${index}">`
    itemss += `
    <div class="mainTop">
      <div class="title">您有新的运输任务</div>
    `
    itemss += item.isRead ? '' : `
      <div class="missionCircle"></div>
    `
    itemss +=`</div>`
  itemss += `
          <div class="theMinMission">
            <div class="carsName">${item.name}</div>
            <div class="arrivedName">${item.route}</div>
          </div>
          <div class="bottomMission">
            <div class="missionDate">${item.date.toLocaleString()}</div>
            <span class="checkDetails">查看详情</span>
          </div>
        </li>  
  `
  })
  misionStr.innerHTML = itemss
  localStorage.setItem('arr2',JSON.stringify(arr2))
  const missionList = document.querySelectorAll('.totalBlock .mission ul li')
  // 消除红点
  missionList.forEach(function (item, index) {
    item.addEventListener('touchstart', function () { 
      // const missionCircle = document.querySelectorAll(`.totalBlock .mission ul li .mainTop .missionCircle`)
      // console.log(missionCircle[index]);
      // missionCircle[index].style.opacity = 0
      arr2[index].isRead = true
      console.log(arr2)
     renderSecond()
   })
  })
}
